<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <script type="text/javascript" src="../js/jquery1.9.1.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <style>
        * {
            font-size: 16px;
        }

        #create {
            position: relative;
            margin-top: 20px;
            width: 800px;
            height: 800px;
            overflow: auto;
            border: 5px solid whitesmoke;
        }

        .opt > p {
            margin-top: 5px;
        }

        .footer {
            margin-top: 30px;
        }

        .content {
            margin-left: 20px;
            margin-top: 15px;
        }

        .top {

            margin-top: 20px;
        }

        .timer {
            margin-top: 10px;
            margin-left: 500px;
        }

        .same {
            color: red;
        }

        .option {
            display: inline-block;
        }
    </style>
</head>

<body>
<div align="center" class="top">
    <span style="font-size: 30px;">考试</span>
    <div id="timer" style="color:red;margin-top: 10px;"></div>
</div>

<div align="center" class="container" id="app">

    <div align="center" id="create">
        <div class="card-body">
            <h1 class="card-title" style="color: #00A1D6;margin-bottom: 20px;">试卷【{{paper.paperNo}}】</h1>
            <span>题目数量:</span><span class="same">{{paper.questionCount}} </span>
            <span>每题分值:</span><span class="same">{{paper.scorePerQuestion}}</span>
            <span>总分:</span><span class="same">{{paper.totalScore}}</span>
            <span>总时长(分钟):</span><span class="same">{{paper.examDuration}}</span>
            <div v-for="(q , index) in paper.questionList" class="content">
                <h3 align="left">{{index+1}}:<div v-html="q.questionContent" class="option"></div></h3>
                <div align="left" class="opt">
                    <div>
                        <input type="radio" :name="index" @click="getOpt(1,index)" class="option">
                        A.<span v-html="q.answerA" class="option"></span>
                    </div>
                    <div>
                        <input type="radio" :name="index" @click="getOpt(2,index)" class="option">
                        B.<span v-html="q.answerB" class="option"></span>
                    </div>
                    <div>
                        <input type="radio" :name="index" @click="getOpt(3,index)" class="option">
                        C.<span v-html="q.answerC" class="option"></span>
                    </div>
                    <div>
                        <input type="radio" :name="index" @click="getOpt(4,index)" class="option">
                        D.<span v-html="q.answerD" class="option"></span>
                    </div>
                </div>
            </div>
            <div class="footer">
                <button type="button" class="layui-btn  layui-btn-normal" @click="submitPaper()">提交试卷</button>
                <!-- <button type="button" class="layui-btn  layui-btn-normal">重置问卷</button> -->
            </div>
        </div>
    </div>

</div>
</body>
<script>
    //加载layui组件
    var layer = layui.use("layer", function (layer) {
    });
    // 页面一加载就有的地址栏参数
    var params = getParams();
    var examNo = params.examNo;
    var userId = params.userId;
    var app = new Vue({
        el: "#app",
        data: {
            paper: {},
            checkedRadio: -1,
            answers: [],
            isChecked: '',
            maxtime: 0
        },
        methods: {
            //选项的标识数字转字母
            numToChar: function (num) {
                return String.fromCharCode(num + 64);
            },
            //获取选项的内容
            getOpt: function (num, item) {
                var option = this.numToChar(num);
                var answer = {
                    option: option,
                    questionNo: item + 1
                };
                this.answers[item] = answer;
            },
            //提交问卷
            submitPaper: function () {
                var answerVOList = this.answers;
                console.log(answerVOList);
                var that = this;
                if (answerVOList.length < this.paper.questionCount) {
                    layer.confirm("您当前还没有答完所有题目，是否要交卷?", function (index) {
                        that.send(answerVOList);
                        layer.close(index);
                    });
                    return;
                }
                this.send(answerVOList);
            },
            //发送答完题的请求
            send: function (answerVOList) {
                axios({
                    method: 'post',
                    url: serverPath + "/exams/" + userId,
                    data: {
                        examNo: examNo,
                        answers: answerVOList
                    },
                    headers: {
                        "auth-token": getToken()
                    },
                    withCredentials: true,
                    responseType: 'json',
                }).then(function (response) {
                    layer.confirm(response.data.data, function () {
                        setTimeout(function () {
                            location.href = "main.html";
                        }, 1500);
                    })
                })
                    .catch(function (error) {
                        layer.alert(error.response.data.error);
                    });
            },
            //重置问卷
            reset: function () {
                this.isChecked = '';
            }
        },
        mounted() {
            var that = this;
            //根据试卷编号获取所有的试卷信息
            axios.get(serverPath + "/exams/info/" + examNo, {
                headers: {
                    "auth-token": getToken()
                }
            }).then(function (response) {
                console.log(response.data.data);
                //将请求的数据源赋值给vue对象中的数据
                that.paper = response.data.data;
                maxtime = parseInt(that.paper.examDuration) * 60;
                //倒计时
                timer = setInterval("countDown()", 1000);

            })
                .catch(function (error) {
                    layer.alert(error.response.data.error)
                });

        }
    });

    function countDown() {
        // var maxtime = app.maxtime;
        if (maxtime >= 0) {
            hours = Math.floor(maxtime / 3600);
            minutes = Math.floor(maxtime / 60 - 60 * hours);
            seconds = Math.floor(maxtime % 60);
            msg = "距离结束还有" + hours + "时" + minutes + "分" + seconds + "秒";
            document.all["timer"].innerHTML = msg;
            if (maxtime == (parseInt(app.paper.examDuration) - 1) * 60 + 55) {
                layer.alert('注意，考试已开始，请认真审题，诚实应答');
            }
            if (maxtime == 30 * 60) {
                layer.alert('注意，还有30分钟!');
            }
            if (maxtime == 5 * 60) {
                layer.alert('注意，还有5分钟!');
            }
            --maxtime;
        } else {
            clearInterval(timer);
            app.send(app.answerVOList);
            layer.confirm("时间到，结束!", function (index) {
                setTimeout(function () {
                    location.href = "main.html";
                }, 1500);
            });
        }
    }
</script>

</html>
